<template>
  <el-container class="setting-center_mall-shop-setting_shop-role-setting">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <vxe-table
          ref="xTable"
          border
          resizable
          row-id="id"
          highlight-hover-row
          :auto-resize="true"
          :data="tableData"
          width
          max-height="500"
          :print-config="{}"
        >
          <vxe-table-column field="name" align="center" title="员工角色" slots="default" min-width="100">
            <template slot-scope="scope">
              <div class="roleName">
                <label> {{ scope.row.name }} </label>
                <div class="tags">官</div>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" align="center" title="描述" />
          <vxe-table-column title="操作" fixed="right" align="center" min-width="130" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-chat-line-round" @click="getList(scope.row.name)">编辑</el-button>
              <el-button type="text" size="mini" icon="el-icon-chat-line-round">查看</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getRentList()"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      rules: {
        name: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择所在城市', trigger: 'blur' }
        ]
      },
      title: '蜂网电子商务',
      params: {
        name: '0'
      },
      tableData: [
        {
          name: '111',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  mounted() {
  },
  methods: {
    getList() {}
  }
}
</script>

<style lang="scss">
.setting-center_mall-shop-setting_shop-role-setting {
  .roleName {
    display: flex;
    align-items: center;
    justify-content: center;
    .tags {
      margin-left: 5px;
      padding: 0 5px;
      border: 1px solid #ccc;
      font-size: 12px;
    }
  }
}
</style>
